<template>
  <!-- 任务 -->
  <div v-loading="loading">
    <ProTable
      ref="proTable"
      :columns="columns"
      :data="list"
      row-key="taskId"
      :tool-button="false"
      :pagination="false"
      :height="list.length > 0 ? '' : 200"
    >
      <!-- 状态 0为新建  1处理中 2完成 -->
      <template #taskStatus="scope">
        <div>
          <span v-if="scope.row.taskStatus == '1'">处理中</span>
          <span v-else-if="scope.row.taskStatus == '2'">完成</span>
          <span v-else>新建</span>
        </div>
      </template>
    </ProTable>
  </div>
</template>

<script setup lang="ts" name="TaskListBox">
import { ref, reactive } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import ProTable from "@/components/ProTable/index.vue";
import { ProTableInstance } from "@/components/ProTable/interface";
import { findPagerChangeTask } from "@/api/modules/eventManagement";

const props = defineProps({
  eno: Number || String,
  eventType: String
});

// ProTable 实例
const proTable = ref<ProTableInstance>();

const list = ref<any[]>([]);
const loading = ref(true);

findPagerChangeTask({
  "queryDTO.eno": props.eno,
  "hisotryRecordDto.eventType": props.eventType,
  _search: false,
  nd: new Date().getTime(),
  sidx: "taskId",
  sord: "desc",
  page: 1,
  rows: 10
})
  .then((res: any) => {
    loading.value = false;
    list.value = res.data || [];
  })
  .catch(() => {
    loading.value = false;
  });

// 表格配置项
const columns = reactive([
  { prop: "taskId", label: "编号", width: 100 },
  { prop: "etitle", label: "标题" },
  { prop: "location", label: "地点" },
  { prop: "taskStatus", label: "状态", width: 100 },
  { prop: "startTime", label: "开始时间" },
  { prop: "endTime", label: "结束时间" },
  { prop: "owner", label: "组长" },
  { prop: "option", label: "操作项", width: 100 }
]);
</script>

<style lang="scss" scoped>
:deep(.card) {
  padding: 0;
  border: none;
}
</style>
